<template>
  <el-container class="page-user" v-if="user">
    <el-aside style="width: 240px;">
      <el-container>
        <el-header style="height: auto;display: block;">
          <div class="user-info-top">
            <el-avatar :size="70" :src="user.avatar ?  user.avatar : 'img/avatar.jpg'"></el-avatar>
            <h2>{{ user.nickName }}</h2>
            <p>
              <el-tag v-if="user.userCode === 'PLATFORM_SUPER_USER'" disable-transitions effect="dark" round
                      size="large">
                平台超级管理员
              </el-tag>
              <el-tag v-else-if="user.userCode === 'SYSTEM_SUPER_USER'" disable-transitions effect="dark" round
                      size="large">
                租户超级管理员
              </el-tag>
              <el-tag v-else-if="user.platformRoleList && user.platformRoleList.length > 0" disable-transitions
                      effect="dark" round size="large">
                {{ user.platformRoleList[0].roleName }}
              </el-tag>
              <el-tag v-else disable-transitions effect="dark" round size="large">
                无角色
              </el-tag>
            </p>
          </div>
        </el-header>
        <el-main class="nopadding">
          <el-menu :default-active="page" class="menu">
            <el-menu-item-group v-for="group in menu" :key="group.groupName" :title="group.groupName">
              <el-menu-item v-for="item in group.list" :key="item.component" :index="item.component"
                            @click="openPage">
                <el-icon v-if="item.icon">
                  <component :is="item.icon"/>
                </el-icon>
                <template #title>
                  <span>{{ item.title }}</span>
                </template>
              </el-menu-item>
            </el-menu-item-group>
          </el-menu>
        </el-main>
      </el-container>
    </el-aside>
    <el-main>
      <Suspense>
        <template #default>
          <component :is="page" @getInfo="getInfo"/>
        </template>
        <template #fallback>
          <el-skeleton :rows="3"/>
        </template>
      </Suspense>
    </el-main>
  </el-container>
</template>

<script>
import {defineAsyncComponent} from 'vue'

module.exports = {
  name: 'userCenter',
  components: {
    account: defineAsyncComponent(() => import('./user/account.vue')),
    set: defineAsyncComponent(() => import('./user/set.vue')),
    password: defineAsyncComponent(() => import('./user/password.vue')),
    logs: defineAsyncComponent(() => import('./user/logs.vue')),
  },
  data() {
    return {
      menu: [
        {
          groupName: "基本设置",
          list: [
            {
              icon: "el-icon-postcard",
              title: "账号信息",
              component: "account"
            },
            {
              icon: "el-icon-operation",
              title: "个人设置",
              component: "set"
            },
            {
              icon: "el-icon-lock",
              title: "密码",
              component: "password"
            }
          ]
        },
        {
          groupName: "数据管理",
          list: [
            {
              icon: "el-icon-clock",
              title: "操作日志",
              component: "logs"
            }
          ]
        }
      ],
      userId: this.$TOOL.data.get("APP_USER_INFO").userId,
      user: null,
      page: "account"
    }
  },
  //路由跳转进来 判断from是否有特殊标识做特殊处理
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (from.is) {
        //删除特殊标识，防止标签刷新重复执行
        delete from.is
        //执行特殊方法
        vm.$alert('路由跳转过来后含有特殊标识，做特殊处理', '提示', {
          type: 'success',
          center: true
        }).then(() => {
        }).catch(() => {
        })
      }
    })
  },
  created() {
    this.getInfo();
  },
  methods: {
    getInfo() {
      this.$API.user.getUserById.get(this.userId).then(response => {
        if (response.status) {
          this.user = response.data;
        } else {
          this.$message.warning(response.msg);
        }
      });
    },
    openPage(item) {
      this.page = item.index
    }
  }
}
</script>
